<template>
    <div>
        <el-table :data="examine" stripe style="width: 100%">
            <el-table-column prop="storeName" label="商家名称">
            </el-table-column>
            <el-table-column prop="storePhone" label="商家电话">
            </el-table-column>
            <el-table-column prop="storeLogo" label="商家logo">
                <template slot-scope="props">
                    <el-image style="width: 60px; height: 60px" :src="props.row.storeLogo"></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="storeType" label="商家类型">
                <template slot-scope="props">
                    <el-tag v-if="props.row.storeType === 1">汽车4s店</el-tag>
                    <el-tag v-else-if="props.row.storeType === 2">汽车修理店</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="masterName" label="负责人名称">
            </el-table-column>
            <el-table-column prop="masterPhone" label="负责人电话">
            </el-table-column>
            <el-table-column prop="address" label="商家地址">
            </el-table-column>
            <el-table-column prop="createDate" label="申请时间">
            </el-table-column>
            <el-table-column label="操作">
                <template #default="scope">
                <el-button type="danger" size="mini" @click="examInfo(scope.row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- ---------分页------------ -->
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage4"
             :page-size="10" layout="prev, pager, next" :total="total" background>
        </el-pagination>

        <!-- 弹出框---对话框 -->
        <el-dialog title="订单详情" :visible.sync="dialogVisible" width="43%" center> 
            
            <el-descriptions class="margin-top" :column="3" border>
                <el-descriptions-item>
                    <template slot="label">
                        商家名称
                    </template>
                    {{ currentExamine.storeName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        商家类型
                    </template>
                    <el-tag v-if="currentExamine.storeType === 1">汽车4s店</el-tag>
                    <el-tag v-else-if="currentExamine.storeType === 2">汽车修理店</el-tag>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        商家Logo
                    </template>
                    <el-image style="width: 60px; height: 60px" :src="currentExamine.storeLogo"></el-image>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        商家地址
                    </template>
                    {{ currentExamine.address }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        商家电话
                    </template>
                    {{ currentExamine.storePhone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        商家门头
                    </template>
                    <el-image style="width: 100px; height: 100px" :src="currentExamine.frontDoor"></el-image>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        营业执照
                    </template>
                    江苏省苏州市吴中区吴中大道 1188 号
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        负责人姓名
                    </template>
                    {{ currentExamine.masterName }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        业务员姓名
                    </template>
                    {{
                       currentExamine.serveName
                    }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        业务员电话
                    </template>
                    {{ currentExamine.servePhone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        负责人电话
                    </template>
                    {{ currentExamine.masterPhone }}
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">
                        申请时间
                    </template>
                    {{ currentExamine.createDate }}
                </el-descriptions-item>
            </el-descriptions>
            <span slot="footer">
                <el-button type="danger" @click="delExam">驳回</el-button>
                <el-button type="primary" @click="dialogVisible = false">通过</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    export default {
    data(){
        return{
            examine: [],
            total: 0,
            currentPage4: 1,
            dialogVisible: false,
            currentExamine:{}
        }
    },
    mounted() {
        this.initExamine()
    },
    methods: {
        initExamine(pageNum=1,pageSize) { 
            this.$http.get("/merchant/getVerifyMerchants", { params: { pageNum, pageSize: 10 } }).then(res => {
                console.log(res)
                this.examine = res.data.object.list
                this.total = res.data.object.total
            })
         },
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.initExamine(val)
        },
        examInfo(examine) {
            this.dialogVisible = true,
                this.currentExamine = JSON.parse(JSON.stringify(examine));
            
        },
        delExam() {
            this.dialogVisible = false
        }

    }
        
    }
    
</script>

<style lang="scss" scoped>

</style>